import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { ConfigProvider } from 'antd'; // 改用Ant Design的主题配置（与项目之前使用的组件库保持一致）
import zhCN from 'antd/locale/zh_CN';
import 'antd/dist/reset.css';

// 布局组件
import MainLayout from './layouts/MainLayout';
import AuthLayout from './layouts/AuthLayout';

// 页面组件
import LoginPage from './features/auth/LoginPage';
import DashboardPage from './features/dashboard/DashboardPage';
import CommentListPage from './features/comments/CommentListPage';
import CommentDetailPage from './features/comments/CommentDetailPage';
import PredictionPage from './features/prediction/PredictionPage';
import ModelComparisonPage from './features/models/ModelComparisonPage';
import SystemSettingsPage from './features/settings/SystemSettingsPage';
import NotFoundPage from './components/NotFoundPage';

// 类型
import { RootState } from './store';

const App: React.FC = () => {
  // 从Redux获取认证状态
  const { isAuthenticated } = useSelector((state: RootState) => state.auth);

  // 路由守卫：未登录用户重定向到登录页
  const PrivateRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
  };

  // Ant Design主题配置
  const antdTheme = {
    token: {
      colorPrimary: '#1890ff',
      borderRadius: 4,
    },
    locale: zhCN,
  };

  return (
    <ConfigProvider theme={antdTheme}>
      <Router>
        <Routes>
          {/* 无需登录的路由 */}
          <Route element={<AuthLayout />}>
            <Route path="/login" element={<LoginPage />} />
          </Route>

          {/* 需要登录的路由 */}
          <Route
            element={
              <PrivateRoute>
                <MainLayout >
                  <Outlet />
                </MainLayout>
              </PrivateRoute>
            }
          >
            <Route path="/" element={<Navigate to="/dashboard" />} />
            <Route path="/dashboard" element={<DashboardPage />} />
            <Route path="/comments" element={<CommentListPage />} />
            <Route path="/comments/:id" element={<CommentDetailPage />} />
            <Route path="/prediction" element={<PredictionPage />} />
            <Route path="/models/comparison" element={<ModelComparisonPage />} />
            <Route path="/settings" element={<SystemSettingsPage />} />
          </Route>

          {/* 404页面 */}
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </Router>
    </ConfigProvider>
  );
};

export default App;
